/* 公共的样式 */
* {
  margin: 0;
  padding: 0;
}
html, body{
  height: 100%;
}
header, nav, article{
  display: block;
}
/* 首页的样式 */
/* 头部的样式 */
header{
  height: 60px;
  background-color: teal;
}

/* 体部的样式 */
article.sc-body{
  /* calc是计算函数 */
  height: calc(100% - 60px);
  background-color: coral;
  /* 使用flex布局 使nav与content在同一行 */
  display: flex;
}
/* 左侧导航栏样式 */
.sc-body nav{
  /* nav占180px */
  width: 180px;
  text-align: center;
}

/* 右侧内容区样式 */
.sc-body .content{
  /* content占剩余全部 */
  flex: 1;
  background-color: white;
}

/* 设置li样式 */
.sc-body nav li{
  /* 设置鼠标样式 */
  cursor: pointer;
  list-style: none;
  line-height: 30px;
}

/* 设置hover样式 */
.sc-body nav li:hover{
  color: teal;
}

